<template>
  <div class="app-container">

   <div class="filter-container">
    
      <el-select v-model="selectValue"  placeholder="请选择工具名称" class='inp_search'>
          <el-option
          v-for="item in optionsData"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          </el-option>
      </el-select>
      
      <el-input
          placeholder="输入查询"
          v-model="input_conten"
          clearable class='inp_search'>
      </el-input>
      
      
      <el-button  class="filter-item" type="primary" icon="el-icon-search" @click="searchList" >
        搜索
      </el-button>
      <el-button  class="filter-item" type="primary" icon="el-icon-refresh"  @click="resList">
        重置
      </el-button>
    </div>
     
     <!-- 表格 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="归属门店" min-width="200" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.storeName === null">--</span>
          <span v-else > {{scope.row.storeName}} </span>
        </template>
      </el-table-column>

      <el-table-column label="ID" min-width="200" align="center" >
        <template slot-scope="scope">
          <span v-if="scope.row.carId === null">--</span>
          <span v-else> {{scope.row.carId}} </span>
        </template>
      </el-table-column>

      <el-table-column label="车牌号" min-width="200" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.carNum === null">--</span>
          <span v-else> {{scope.row.carNum}} </span>
        </template>
      </el-table-column>

      <el-table-column label="用户手机号" width="120" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.userPhone === null">--</span>
          
          <span v-else > {{scope.row.userPhone}} </span>
        </template>
      </el-table-column>

      <!-- <el-table-column label="门店手机号" min-width="200" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.storePhone === null">--</span>
          <span v-else > {{scope.row.storePhone}} </span>
        </template>
      </el-table-column> -->

       <el-table-column label="行驶证" min-width="200" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.driverId === null">--</span>
          <span v-else> {{scope.row.driverId}} </span>
        </template>
      </el-table-column>

      <el-table-column label="车辆图片" min-width="200" align="center">

          <template slot-scope="scope" >
            <span v-if="scope.row.carImg === ''">--</span>
            <viewer v-else>
              <img :src="scope.row.carImg" class='carImgs'>
            </viewer>
          </template>
        
      </el-table-column>

      <el-table-column label="备注" min-width="200" align="center" >
        <template slot-scope="scope">
          <span v-if="scope.row.carRemarks === null">--</span>
          <span v-else> {{scope.row.carRemarks}} </span>
        </template>
      </el-table-column>

      <el-table-column v-if="role == '4'"  fixed="right" label="操作" width="120" align="center">
           <template scope="scope">
              <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
           </template>
      </el-table-column>
    </el-table>
   <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"  @pagination="fetchData"/>

   <!-- 添加 -->
   <div class='formPosition' v-if='dialogFormVisible'>
   <div class='titleForm'>
          <div class='left_titleForm'>修改</div>
          <span class="icon iconfont right_titleForm" @click="dialogFormVisible = false">&#xe72d;</span>
   </div>
   <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm " :visible.sync="dialogFormVisible">
         
          <el-form-item  label="用户手机号" prop="userPhone">
          <el-input v-model="ruleForm.userPhone"></el-input>
          </el-form-item>

          <el-form-item  label="车牌号" prop="carNum">
          <el-input v-model="ruleForm.carNum"></el-input>
          </el-form-item>

          <el-form-item  label="归属门店" prop="storeName">
                <el-select v-model="addSelectStores"  placeholder="请选择" class='select_roles' @change="getStaff(addSelectStores)">
                      <el-option
                      v-for="item in optionsStores"
                      :key="item.userId"
                      :label="item.userName"
                      :value="item.phone">  
                      </el-option>
                </el-select>
          </el-form-item>

          <el-form-item  label="门店手机号" prop="addSelectStores">
          <el-input v-model="addSelectStores" readonly></el-input>
          </el-form-item>

          <el-form-item  label="行驶证" prop="driverId">
          <el-input v-model="ruleForm.driverId"></el-input>
          </el-form-item>

          <el-form-item  label="ID" prop="carId">
          <el-input readonly v-model="ruleForm.carId"></el-input>
          </el-form-item>

          <el-form-item  label="车辆图片" >
             <viewer>
               <!-- <img class='carImgs1' src='https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'/>
               <img class='carImgs1' src='https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'/> -->
            </viewer>
          </el-form-item>

          <el-form-item  label="备注" prop="carRemarks">
            <el-input type="textarea" v-model="ruleForm.carRemarks"></el-input>
          </el-form-item>

          
          <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')" >确认</el-button>
          <el-button @click="dialogFormVisible = false">取消</el-button>
          </el-form-item>
     </el-form>
    </div>
  </div>
   
   
  
</template>

<script>
import { getCarsList , searchByPhone ,searchByCarNum ,modify} from '@/api/carsManage'
import { getRoles } from '@/api/userManage'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination'
export default {
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      role:'',
      input_conten:'',
      optionsData: [{
          value: 'userPhone',
          label: '用户手机号'
        }, {
          value: 'carNum',
          label: '车牌号'
        }],
      selectValue: '',
      titleName:'',
      list: null,
      listLoading: true,
      total: 0,
      imgsDtata:[],
      listQuery:{
           page: 1,
           limit: 10,
      },
      addSelectStores:'',
      optionsStores:[],
      dialogFormVisible:false,
      ruleForm: {
          carId: '',
          carImg: [],
          carNum: '',
          driverId: '',
          storeName: '',
          storePhone: '',
          userPhone: '',
          carRemarks:''
        },
      clearForm:{
          carId: '',
          carImg: [],
          carNum: '',
          driverId: '',
          storeName: '',
          storePhone: '',
          userPhone: '',
          carRemarks:''
      },
        rules: {
          carId: [
            { required: true, message: '请输入ID', trigger: 'blur' },
          ],
           carNum: [
            { required: true, message: '请输入车牌号', trigger: 'blur' },
          ],
          driverId: [
            { required: true, message: '请输入行驶证', trigger: 'blur' },
          ],
           storeName: [
            { required: true, message: '请输入归属门店', trigger: 'blur' },
          ],
          storePhone: [
            { required: true, message: '请输入门店手机号', trigger: 'blur' },
          ],
           userPhone: [
            { required: true, message: '请输入用户手机号', trigger: 'blur' },
            {
            pattern: /^1[0-9]{10}$/,
            message: '用户手机号格式不对',
            trigger: 'blur'
          },
          ],
          carRemarks:[
            { required: false, message: '请输入备注内容', trigger: 'blur' },
          ]
          // carImg: [
          //   { required: true, message: '请选择活动区域', trigger: 'change' }
          // ],
          
        }
    }
  },
  created() {
     const userInfo  = localStorage.getItem('userInfo');
     this.role = JSON.parse(userInfo).role;
      this.selectValue = this.optionsData[0].label;
      this.selectValue = "userPhone";
      this.fetchData()
      this.getRole()
  },
  methods: {
    fetchData() {
        this.listLoading = true
        const paramsData = {curPage:this.listQuery.page,pageSize:this.listQuery.limit}
        getCarsList(paramsData).then(res => {
           this.list = res.data.obj;
           this.total = res.data.countNum;
           const imgs =res.data.obj[1].carImg;
           this.listLoading = false
        })
    },
   submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.listLoading = true
            this.handleModify(formName);
          } else {
             this.$notify({
                    message: '提交失败',
                    type: 'error',
                    duration: 2000
                })
            return false;
          }
        });
      },
      resetForm(formName) {
          this.ruleForm = this.cleanForm;
          this.$refs.ruleForm.resetFields();
          this.dialogFormVisible = false;  
      },
      handleEdit(index, row ) {//修改
          this.dialogFormVisible = true;
          this.addSelectStores = row.storePhone;
          this.ruleForm = Object.assign({}, row);
      },
      handleModify(formName){//修改提交
             const paramsData = {
                  carId:this.ruleForm.carId,
                  carNum:this.ruleForm.carNum,
                  userPhone:this.ruleForm.userPhone,
                  storeName:this.ruleForm.storeName,
                  storePhone:this.ruleForm.storePhone,
                  driverId:this.ruleForm.driverId,
                  carImg:this.ruleForm.carImg,
                  carRemarks:this.ruleForm.carRemarks
                  }
                modify(paramsData).then(res => {
                  this.list = res.data;
                  if(res.code == '200'){
                        this.$notify({
                        message: '修改成功',
                        type: 'success',
                        duration: 2000
                    })
                  }else{
                    this.$notify({
                        message: '修改失败',
                        type: 'error',
                        duration: 2000
                    })
                  }
                  this.fetchData()//获取列表
              })
            this.listLoading = false;
            this.resetForm(formName) 
      },
      getRole(){//获取角色/门店
        const para = 1;
        const paramsData = {type:para}
          getRoles(paramsData).then(res => {
                    const datas = res.data;
                    this.optionsStores = datas;
                })
      },
       getStaff(para){//获取员工
          var obj = {};
          obj = this.optionsStores.find(item =>{
              return item.phone === para 
          });
          this.ruleForm.storePhone = obj.phone;
          this.ruleForm.storeName = obj.userName;
      },
      resList(){
          const userInfo  = localStorage.getItem('userInfo');
          this.role = JSON.parse(userInfo).role;
          this.selectValue = this.optionsData[0].label;
          this.selectValue = "userPhone";
          this.fetchData()
          this.getRole()
      },
      searchList(){//搜索
         if(this.input_conten){
            if(this.selectValue == 'userPhone'){//手机
                const paramsData = {userPhone:this.input_conten,curPage:this.listQuery.page,pageSize:this.listQuery.limit}
                searchByPhone(paramsData).then(res => {
                      this.list = res.data.obj;
                  })
            }else{//车牌号 searchByCarNum
                const paramsData = {carNum:this.input_conten}
                searchByCarNum(paramsData).then(res => {
                      this.list = res.data.obj;
                  })
            }
            
         }else{
           this.fetchData();
          //  this.$notify({
          //           message: '请先输入搜索内容',
          //           type: 'error',
          //           duration: 2000
          //       })
            return false;
         }

      }
    }
  
 }
</script>
<style lang="scss">
 .filter-container{
   margin-bottom:20px;
 }
 .el-date-range-picker{
   margin-left:220px;
 }
 .inp_search{
   width:20%;
   margin-right:1%;        
 }
 .formPosition{
    width:70%;
    height:auto;
    background:#fff;
    position:absolute;
    left:15%;
    top:5%;
    z-index:999;
    padding:30px;
    box-shadow: 0px 0px 5px 5px #eee;
    border-radius: 5px;
 }
 .demo-ruleForm{
      width:50%;     
 }
 .titleForm{
     width:100%;
     height:30px;
     line-height:30px;
     margin-bottom:20px;
     font-size:1.1em;
     font-weight: 500;
 }
 .left_titleForm{
    float:left;
 }
 .right_titleForm{
    display:block;
    float:right;
 }
 .select_roles{
    width:100%;
 }
 .carImgs{
   width:45px;
   height:45px;
   border-radius:5px;
   margin:0 3px;
 }
 .carImgs1{
   width:60px;
   height:60px;
   border-radius:5px;
   margin:0 3px;
   border:solid 1px #efefef;
 }
</style>
